<!doctype html>
<html lang="zh-cmn-Hans">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">    
    <title>WebSocket Demo</title>

    <style>
      .myheader {
          background: url(header.png);
          background-size: myheader;
          background-repeat: round;
      }
  </style>
</head>

<body>

Server IP: <input type="text" id="fieldServerIp" style="width:60%" value="127.0.0.1"><br>
Server Port: <input type="text" id="fieldServerPort" style="width:60%" value="4040"><br><br>

数值1: <input type="text" id="fieldNumber1" style="width:60%" value="2"><br>
数值2: <input type="text" id="fieldNumber2" style="width:60%" value="3"><br>
运算结果: <input type="text" id="fieldRecv" style="width:60%"><br>
日志文本: <input type="text" id="fieldLog" style="width:60%">
<br><br>
<button onclick="openWebSocket()">打开WebSocket</button>
<button onclick="closeWebSocket()">关闭WebSocket</button><br>
<button onclick="add()">+</button>
<button onclick="sub()">-</button>
<button onclick="mul()">*</button>
<button onclick="div()">/</button>

</body>

<script>

let webSocketConnected = false;
let connection;
let intervalId;

function openWebSocket() {
	if (webSocketConnected) {
		return;
	}
	
	// dotnet-watch browser reload script
	try {
		var ip = document.getElementById("fieldServerIp").value;
		var port = document.getElementById("fieldServerPort").value;
		//ws://127.0.0.1:4040
		connection = new WebSocket('ws://' + ip + ':' + port);
	} catch (ex) {
		console.debug(ex);
		addLog(ex);
		return;
	}
	
	connection.onmessage = function (message) {
		showMessage(getDateTimeFormat() + message.data);
	}
	connection.onerror = function (event) {
		addLog(event);
		console.debug('dotnet-watch reload socket error.', event);
	}
	connection.onclose = function () {
		webSocketConnected = false;
		addLog('dotnet-watch reload socket closed.');
		console.debug('dotnet-watch reload socket closed.');
	}
	connection.onopen = function () {
		webSocketConnected = true;
		addLog('dotnet-watch reload socket connected.');
		console.debug('dotnet-watch reload socket connected.');
		connection.send('ECHO Hello from client.\r\n');
	}
}

function closeWebSocket() {
	if (webSocketConnected) {
		connection.close();
	}
}

function getDateTime() {
	var date = new Date();
	var month = date.getMonth() + 1;
	var day = date.getDate();
	var monthStr = month < 10 ? '0' + month : month;
	var dayStr = day < 10 ? '0' + day : day;
	return date.getFullYear() + '-' + monthStr +	'-' +
		dayStr + ' ' + (date.getHours() + 1) + ':' +
		date.getMinutes() + ':' + date.getSeconds() + ' ' +
		date.getMilliseconds();
}

function getDateTimeFormat() {
	return '[' + getDateTime() + '] ';
}

function addLog(log) {
	document.getElementById("fieldLog").value = getDateTimeFormat() + log;
}

function showMessage(message) {
	document.getElementById("fieldRecv").value = message;
}

function getParameters() {
	var number1 = document.getElementById("fieldNumber1").value;
	var number2 = document.getElementById("fieldNumber2").value;
	return number1 + ' ' + number2;
}

function add() {
	if (webSocketConnected) {
		connection.send('ADD ' + getParameters() + '\r\n');
	}
}

function sub() {
	if (webSocketConnected) {
		connection.send('SUB ' + getParameters() + '\r\n');
	}
}

function mul() {
	if (webSocketConnected) {
		connection.send('MUL ' + getParameters() + '\r\n');
	}
}

function div() {
	if (webSocketConnected) {
		connection.send('DIV ' + getParameters() + '\r\n');
	}
}
</script>

</html>